<template>
	<view class="contentBox">
		<view class="header" :style="{paddingTop:`${menuButton.top}rpx`}">
			我的
		</view>
		<view class="boxItem">
			<!-- 头部信息 -->
			<image class="boxIg" src="../../static/mybg.jpg"></image>
			<view class="headerBox">
				<view class="headerInfo">
					<view class="navTitle">
						<view class="titleImg">
							<view v-if="userObj.phoneNumber">
								<image class="imaRade" :src="headPortrait"></image>
							</view>
							<view class="userInfo" v-if="userObj.phoneNumber">
								<view class="userName">{{userObj.userName}}</view>
								<view class="userId">手机号：{{userObj.phoneNumber}}</view>
								<view class="userId">余额：{{userObj.balance || 0}}</view>
							</view>
							<view v-if="!userObj.userName" @click="login()" class="bgLogin">
								点击登录
							</view>
						</view>
						<view class="iconBox" @click="goAddressFn()">
							<uni-icons type="gear" color="#666666;" size="24" class="iconBg"></uni-icons>
						</view>
					</view>
					<!-- <view class="numPay">
						<view class="numPayItem" @click="goBalanceDetails()">
							<view class="numNav">{{userObj.balance || 0}}</view>
							<view class="textNav">余额</view>
						</view>
						<view class="numPayItem" @click="goCoupons()">
							<view class="numNav">{{userObj.coupons || 0}}</view>
							<view class="textNav">优惠券</view>
						</view>
						<view class="numPayItem">
							<view class="numNav">{{userObj.points || 0}} </view>
							<view class="textNav">积分</view>
						</view>
					</view> -->
				</view>
			</view>
			<view class="boxConterItem">
				<view class="goodCenter">
					<view class="boxNav">
						<view class="goodCoenters">
							<view class="navCls">订单中心</view>
							<view class="navColor" @click="getdelFn('-1')">
								查看全部
								<uni-icons type="right" size="14" class="iconBg"></uni-icons>
							</view>
						</view>
						<view class="boxCardel">
							<view class="bgIocn" @click="getdelFn('1')">
								<view class="bgIocnItem">

									<view class="godItem">
										<view class="imgBgItem">
											<image class="imaRadeIocn" mode="aspectFit" src="../../static/toPay.png">
											</image>
											<view class="numGoods" v-if="goodObj.toPay">{{goodObj.toPay}}</view>
										</view>
										<view class="title">待付款</view>
									</view>
								</view>
							</view>
							<view class="bgIocn" @click="getdelFn('2')">
								<view class="bgIocnItem">

									<view class="godItem">
										<view class="imgBgItem">
											<image class="imaRadeIocn" src="../../static/toSend.png"></image>
											<view class="numGoods" v-if="goodObj.toSend">{{goodObj.toSend}}</view>
										</view>
										<view class="title">待发货</view>
									</view>
								</view>
							</view>
							<view class="bgIocn" @click="getdelFn('3')">
								<view class="bgIocnItem">

									<view class="godItem">
										<view class="imgBgItem">
											<image class="imaRadeIocn" src="../../static/toReceive.png"></image>
											<view class="numGoods" v-if="goodObj.toReceive">{{goodObj.toReceive}}</view>
										</view>
										<view class="title">待收货</view>
									</view>
								</view>
							</view>
							<view class="bgIocn">
								<view class="bgIocnItem">
									<view class="godItem" @click="getdelFn('8')">
										<view class="imgBgItem">
											<image class="imaRadeIocn" src="../../static/toReview.png"></image>
											<view class="numGoods" v-if="goodObj.complete">{{goodObj.complete}}</view>
										</view>
										<view class="title">已完成</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="boxmyServeItem">
					<view class="goodServe">
						<view class="navCls">我的服务</view>
					</view>
					<view class="boxSever">
						<view class="boxSeverItem">
							<view class="navImgServe" @click="goItemFn()">
								<view class="imgbgImg">
									<image class="imgW" src="../../static/tgIocn.png"></image>
								</view>

								<view class="titleText">我的推广</view>
							</view>

						</view>
					</view>
				</view>
 -->
				<button class="quitLogin" @click="quitLogin" v-if="token">退出登录</button>
			</view>

		</view>
		<login @loginSuccess="loginSuccess" :auth.sync="auth"></login>
		<custom-tab-bar :items="tabItems" :currentIndex="currentTab" @item-click="onTabClick"
		        :color="color" :selectedColor="selectedColor"></custom-tab-bar>
	</view>
	</view>
</template>

<script>
	import MyMinix from '@/utils/minix/minix.js';
	import util from "@/utils/util.js";
	import CustomTabBar from '@/uni_modules/niceui-tabBar/components/niceui-tabBar/niceui-tabBar.vue';
	import tabbar from '@/uni_modules/niceui-tabBar/common/tabbar.js'
	import TnIcon from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
	import {
		getCenterGoods,
		getUserInfoFn,
		queryWelcomePageData,
		login,
		logoutForWx
	} from "@/request/api.js";
	export default {
		mixins: [MyMinix],
		components: {
			TnIcon,
			CustomTabBar
		},
		data() {
			return {
				goodObj: {},
				userObj: {},
				headPortrait:'../../static/user.png',
				auth: false,
				token: '',
				currentTab: 2, // 当前选中的tab索引
				tabItems:tabbar.tabItems,
				color:tabbar.color,
				selectedColor:tabbar.selectedColor,
				menuButton:{}
			};
		},
		onShareAppMessage() {
			return {
				title: '祥瑜团餐',
				path: '/pages/index/index',
				imageUrl: ''
			}
		},
		onShow() {
			let that = this
			that.menuButton = util.getMenuButton()
			that.getdeCenterFn()
			// that.getUserIn()
			let userInfo = uni.getStorageSync('userInfo');
			this.userObj = userInfo;
			this.queryWelcomePageDataFn();
			that.token = uni.getStorageSync('token')
		},
		methods: {
			// 获取首页背景图，轮播图，用户昵称，余额，优惠券，积分等信息
			async queryWelcomePageDataFn() {
				let userInfo = uni.getStorageSync('userInfo')
				if(!userInfo ||  !userInfo?.phoneNumber) {
					uni.showToast({
						title:"未登录,请先登录!",
						icon:'none'
					})
					return
				};
				let res = await queryWelcomePageData({
					method: "get",
					data: userInfo.phoneNumber ? {
						phoneNumber: userInfo.phoneNumber
					} : {}
				});
				if (res.code == 200) {
					// this.indexData = res.data;
					let {userName,balance} = res.data;
					this.userObj.userName = userName;
					this.userObj.balance = balance;
				}
			
			},
			onTabClick(index) { // 切换tab的函数，当选中某个tab时触发
				//this.currentTab = index;  
				if (index != this.currentTab) {
					util.goToUrl(this.tabItems[index].pagePath,index == 0 ? 'reLaunch' : 'redirectTo')
				}
			},
			goItemFn() {
				let that = this;
				that.login()
				if (!that.auth) {
					util.goToUrl('/pages/myPage/myTuiGua/myTg?url=' + that.userObj.headPortrait)
				}
			},
			// 显示登录弹窗
			login() {
				let token = uni.getStorageSync('token');
				if (!token) {
					this.auth = true;
				}
			},
			// 退出登录
			async quitLogin() {
				let that = this;
				let res = await logoutForWx({
					method: "GET",
				})
				if (res.code == 200) {
					uni.showToast({
						title: '退出登录成功',
						icon: 'none',
						success() {
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							that.token = '';
							that.goodObj = {}
							that.userObj = {}
							// 清空 购物车
							this.$store.commit("setShopCarInfo", '');
						}
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},
			// 登录成功 隐藏登录弹窗
			loginSuccess() {
				this.auth = false;
				this.getdeCenterFn()
				this.getUserIn()
				let userInfo = uni.getStorageSync('userInfo');
				this.userObj = userInfo;
			
				this.token = uni.getStorageSync('token')
			},
			goCoupons() {
				let that = this;
				that.login()
				if (!that.auth) {
					util.goToUrl('/pages/myPage/myCoupons/index/index')
				}
			},
			goBalanceDetails() {
				let that = this;
				that.login()
				if (!that.auth) {
					util.goToUrl('/pages/myPage/balanceDetails/balanceDetails')
				}
			},
			//获取用户信息
			async getUserIn() {
				let that = this;
				let res = await getUserInfoFn({
					method: "GET",
					data: {
						userId: that.getUserId()
					},
				})
				if (res.code == 200) {
					that.userObj = res.result
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
					});
				}
				console.log(res, 'resreskk')
			},
			//获取userId
			getUserId() {
				let token = uni.getStorageSync('token').split('.')
				let userinfo = token[1].replace(/-/g, '+').replace(/_/g, '/')
				// 解码base
				let info = new Buffer(userinfo, 'base64').toString('utf8')
				let userId = JSON.parse(info).username.split('token_')[1]
				return userId
			},
			// 订单中心
			async getdeCenterFn() {
				let that = this;
				let userInfo = uni.getStorageSync('userInfo');
				if(!userInfo ||  !userInfo?.phoneNumber) return;
				let res = await getCenterGoods({
					method: "GET",
					data: {
						"companyId": userInfo.companyId,
						"phone": userInfo.phoneNumber,
					},
				})
				if (res.code == 200) {
					that.goodObj = res.data
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
					});
				}
				console.log(res, 'resres')
			},
			// 跳转收货地址
			goAddressFn() {
				this.login()
				if (!this.auth) {
					util.goToUrl("/pages/order/addAddress")
				}
			},
			//跳转订单中心
			getdelFn(status) {
				let that = this
				that.login()
				// login(that.auth,'that.auth')
				if (!that.auth) {
					util.goToUrl('/pages/myPage/delCenter/delCenter?status=' + status + "&toPay=" + that.goodObj.toPay +
						"&toSend=" + that.goodObj.toSend + "&toReceive=" + that.goodObj.toReceive + "&toReview=" + that
						.goodObj.toReview + "&allNum=" + that.goodObj.total);
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		font-size:32rpx;
		font-weight: 600;
		position: fixed;
		top:0;
		left:0;
		width:100%;
		text-align: center;
		z-index: 10;
	}
	.contentBox {
		paddding-bottom:120rpx;
		background-color: #FAFCFF;
		overflow: hidden;

		.boxItem {
			// background-color: #FD6816;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;

			.boxIg {
				position: absolute;
				width:100%;
				height: 410rpx;
			}

			.headerBox {
				// background-color: #FD6816;
				// background: url("@/static/mybg.jpg") no-repeat center center;
				// background-size: 100% 100%;
				// mybg.jpg
				position: relative;
				display: flex;
				justify-content: center;
				padding-top: 180rpx;
				overflow: hidden;
				margin-bottom: 30rpx;
				box-sizing: border-box;
				width: 100vw;

				.headerInfo {
					background-color: #F2E7E4;
					box-sizing: border-box;
					margin-bottom: 40rpx;
					padding-bottom: 30rpx;
					border-radius: 20rpx;
					box-shadow: 0px 10rpx 10rpx 10rpx rgba(0, 0, 0, 0.05);
				}
			}

			.navTitle {
				width: 690rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 30rpx;
				padding-right: 30rpx;
				padding-top: 30rpx;
				color: #000;
				box-sizing: border-box;

				.titleImg {
					display: flex;

					.imaRade {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}

					.userInfo {
						margin-left: 12rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						margin-bottom: 11rpx;
						&>view{
							margin-bottom:10rpx;
							&:last-child{
								margin-bottom:0;
							}
						}

					}
				}

			}

			.numPay {
				width: 690rpx;
				margin-top: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.numPayItem {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					margin-left: 56rpx;
					margin-right: 56rpx;
					box-sizing: content-box;

					.numNav {
						color: rgba(0, 0, 0, 1);
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 40rpx;
					}

					.textNav {
						color: rgba(102, 102, 102, 1);
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
					}
				}
			}

			.iconBox {
				color: #666666;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.boxConterItem {
				// position: absolute;
				display: flex;
				top: 300rpx;
				flex-direction: column;
				align-items: center;
				// overflow: hidden;
				background-color: #fafafa;
				width: calc(100% - 60rpx);
				margin: 0 60rpx;

				.boxmyServe {
					margin-top: 15px;
					background-color: #fff;
					border-radius: 10rpx;
					box-shadow: 0px 0 0 10rpx rgba(0, 0, 0, .2);
					padding: 30rpx;

					.goodServe {
						font-size: 17px;
						font-weight: 700;
					}

				}
			}

			.goodCenter {
				// position: absolute;
				width: calc(100% - 50rpx);
				margin: 0 25rpx;
				background-color: #fff;
				padding: 30rpx;
				// margin-top: 40rpx;
				border-radius: 20rpx;
				overflow: hidden;
				box-shadow: 0px 0px 8px #0000001a;

				.boxNav {
					.goodCoenters {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.navCls {
							color: #000000;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
						}

						.navColor {
							color: #666666;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							display: flex;
							align-items: center;

							// color: #ccc;
						}
					}

				}

				.boxCardel {
					display: flex;
					margin-top: 10px;

					.bgIocn {
						width: 25%;

						.bgIocnItem {
							position: relative;
							margin-right: 10px;
							text-align: center;

							.godItem {
								margin-top: 10px;
								display: flex;
								flex-direction: column;
								justify-content: center;

								.imgBgItem {
									position: relative;
									display: flex;
									justify-content: center;
									width: 60rpx;
									height: 60rpx;
									margin: 0 auto;

									.imaRadeIocn {
										display: block;
										width: 100%;
										height: 100%;
									}

									.numGoods {
										background-color: red;
										border-radius: 50%;
										width: 30rpx;
										border: 1px solid red;
										height: 30rpx;
										position: absolute;
										top: -15rpx;
										right: -15rpx;
										color: #fff;
										line-height: 30rpx;
										text-align: center;
										font-size: 24rpx;
									}

								}

								.title {
									color: #666666;
									font-family: PingFang SC;
									font-weight: 500;
									font-size: 24rpx;
									margin-top: 10rpx;
								}



							}

						}
					}
				}
			}
		}

		.boxmyServeItem {
			width: calc(100% - 50rpx);
			margin: 10px 25rpx 0;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			box-shadow: 0px 0px 8px #0000001a;
			overflow: hidden;
			margin-bottom: 20rpx;
			.navCls {
				color: #000000;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;

			}

			.boxSever {
				margin-top: 28rpx;
				display: flex;

				.boxSeverItem {
					display: flex;
					flex-wrap: wrap;
					width: 25%;
					margin-top: 19rpx;

					.navImgServe {
						// padding-right: 15rpx;


					}
				}

				.imgbgImg {
					display: flex;
					justify-content: center;
					width: 60rpx;
					height: 60rpx;
					margin: 0 auto;
				}

				.imgW {
					display: block;
					width: 100%;
					height: 100%;
				}

				.titleText {
					color: #666666;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					margin-top: 15rpx;
				}
			}
		}

		.bgLogin {
			font-size: 28rpx;
			color: #666;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border: 1rpx solid #666;
			border-radius: 50rpx;
			padding: 0 20rpx;
			margin: 25rpx 0;
		}

		// 退出登录
		.quitLogin {
			background-color: #35AA4C;
			color: #fff;
			border-radius: 30rpx;
			font-size: 28rpx;
			width: 320rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 60rpx;
			text-align: center;
			display: block;
			margin: 50rpx auto;
		}

		.userName {
			color: rgba(0, 0, 0, 1);
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
		}

		.userId {
			color: rgba(102, 102, 102, 1);
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
		}

		userCardInfo {
			color: rgba(0, 0, 0, 1);
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
		}

		/deep/ .quitLogin {
			background: #eb5b1e;
			color: #ffffff;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
		}
	}
</style>